<template>
  <Nav>
    {{ $t('vote.nav') }}
  </Nav>
  <div class="page-vote">
    <div class="content">
      <template v-for="item in data.list">
        <div class="box" @click="action(item)">
          <div class="name wrap">{{ item.name }}</div>
          <div class="status" :class="{ 'null': !item.ransom_status}">
            {{ item.ransom_status !== 'no' ? $t('vote.status.' + (!item.ransom_status ? 'null' : 'yes')) : '' }}
          </div>
          <div v-if="item.union" class="union wrap">{{ item.union.name }}</div>
        </div>
      </template>
      <div class="page">
        <md-activity-indicator v-if="data.loading" type="carousel" color="#5d62a7" :size="15"></md-activity-indicator>
        <md-button v-else-if="data.page <= data.page_max" type="link" icon="arrow-down" @click="get">{{ $t('page.next') }}</md-button>
      </div>
      <div class="box" v-if="!data.loading && data.list.length == 0">
        <span>{{ $t('page.empty') }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { list, asset } from '@/api/vote'
import { toast, dialog } from '@/style'
import { t } from '@/lang'
import Nav from '@/components/nav.vue'

const router = useRouter()

const data = ref({ 
  page: 1,
  page_max: 1,
  list: [],
  loading: true
})

const get = () => {
  data.value.loading = true
  list(data.value.page).then(res => {
    data.value.list.push(...res.data)
    // 记录页码
    data.value.page = res.meta.pagination.current_page + 1
    data.value.page_max = res.meta.pagination.total_pages
  }).finally(() => {
    data.value.loading = false
  })
}

const action = data => {
  // 判断状态
  if(!data.ransom_status) {
    router.push({ path: '/union/list' })
  } else if (data.ransom_status == 'yes') {
    dialog.confirm({
      title: t('confirm'),
      content: t('vote.ransom'),
      confirmText: t('confirm'),
      onConfirm: () =>
        ransom(data)
    })
  }
}

// 投票
const ransom = (data) => {
  toast(t('post'), 'ring', 0)
  asset(data.id, 'ransom', data.vote_to).then(res => {
    toast(t('ok'))
    // 改变状态
    data.ransom_status = null
  }).catch(err => {
    toast(err.message)
  })
}

get()
</script>

<style lang="scss" scoped>
  .page-vote{
    min-height: 100%;
    background: url('@/assets/page.jpg') center center no-repeat;
    background-size: cover;
    background-attachment:fixed;

    .content{
      padding: 130px 30px 0;
    }

    .page{
      padding: 20px;
      display: flex;
      align-items: center;
      flex-direction: column;

      .md-button.link{
        color: #5d62a7;
      }
    }

    .box{
      padding: 20px;
      margin-bottom: 20px;
      border-radius: 10px;
      background-image: linear-gradient(to left, #1f235e, #1d0f5e);
      overflow: hidden;

      span{
        color: #5d62a7;
        font-size: 14px;
        line-height: 30px;
        text-align: center; 
        display:block;
      }

      .name{
        width: 70%;
        color: #fff;
        font-size: 18px;
        line-height: 25px;
        float: left;
      }

      .status{
        width:25%;
        color: #ffc21b;
        font-size: 14px;
        line-height: 25px;
        float:right; 
        text-align: right;

        &.null{
          color: #1cd4b6;
        }
      }

      .union{
        color: #5d62a7;
        font-size: 14px;
        margin-top: 7px;
        width: 100%;   
        float: left;
      }
    }
  }
</style>